<template>
  <aside v-if="menu.length >= 0" class="asideBar" :style="{left: isShowAside ? '0px' : '-200px'}" @mouseleave="menuHide()">
    <div
      v-for="(item,index) in menu"
      :key="item.path"
      class="first-menu"
      @mouseenter="handleEnter(index)"
    >
      <i class="el-icon-platform-eleme" />
      <p>{{ item.meta.title }}</p>
      <ul v-if="currentIndex === index" class="menu-children">
        <li
          v-for="(child, i) in item.children"
          :key="child.url"
          class="child"
          :class="{active: child.path === highlightId}"
          @click="handleRouter(item.path,child)"
          @mouseenter="handleChildEnter(i)"
        >
          <span class="child-span">
            {{ child.meta.title }}
            <i v-if="isHasChild(child.children)" class="arrow el-icon-arrow-right" />
          </span>
          <ul v-if="isHasChild(child.children) && secondIndex === i" class="third-child">
            <li v-for="c in child.children" :key="c.path" :class="{active: c.path === highlightId}" @click="handleThirdRouter(item.path,child.path,c)">
              <span>{{ c.meta.title }}</span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </aside>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Index',
  props: { // 菜单显隐
    isShowAside: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      secondIndex: -1,
      currentIndex: -1,
      highlightId: ''
    }
  },
  computed: {
    ...mapGetters(['menu']),
    isHasChild() {
      return (child) => {
        if (child && child.length > 0) {
          return typeof child === 'object'
        }
      }
    }
  },
  methods: {
    // 三级跳转
    handleThirdRouter(path, path2, c) {
      const fullpath = path + '/' + path2 + '/' + c.path
      this.highlightId = c.path
      this.$router.push(fullpath)
    },
    // 二级跳转
    handleRouter(path, child) {
      if (child.children && child.children.length > 0) return
      this.highlightId = child.path
      this.$router.push(path + '/' + child.path)
    },
    // 三级移除
    handleEnter(index) {
      this.currentIndex = index
    },
    handleChildEnter(index) {
      this.secondIndex = index
    },
    menuHide() {
      this.currentIndex = -1
      this.secondIndex = -1
      this.$emit('update:isShowAside', false)
    }
  }
}
</script>
